<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滴答办公系统-流程统计</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="media/layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-container">
	<div>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="main" style="width: 90%;height:500px;"></div>
	</div>
	<!--<table id="tbdata" lay-filter="tbop"></table>-->
	<!--<script type="text/html" id="barop">-->
		<!--<a class="layui-btn layui-btn-mini" lay-event="y">查看进度</a>-->
		<!--<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="n">取消</a>-->
	<!--</script>-->
</div>

	<script src="media/layui/layui.js"></script>
	<script src="media/js/jquery.min.js"></script>
	<script src="media/js/echarts.common.min.js"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/javascript">
    function getData() {
        var url=window.location.search;
        index=url.indexOf("?");
        if(index>-1){
            var str = url.substr(index+1);
            if(str.indexOf('=')){
                return str.split('=')[1];
            }
        }
        return null;
    }
	$.get("processecharts.do","pid="+getData(),function (obj) {
		init(obj);
    })
	function init(obj) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title : {
                text: obj.id+'流程统计',
                subtext: '效率分析'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['开始时间','结束时间','差值']
            },
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data :obj.datax
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'开始时间',
                    type:'bar',
                    data:obj.datas1,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'结束时间',
                    type:'bar',
                    data:obj.datas2,
                    markPoint : {
                        data : [
                            {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                            {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                }, {
                    name:'差值',
                    type:'bar',
                    data:obj.datas3,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
</script>
</body>
</html>